<template>
	<view :class="[BackGround,'index']" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true" :opcity="opcity" class="fixed">
			<view slot="backText">返回</view>
			<view slot="content">{{deliverplan.LUSERNAME}}</view>
		</cu-custom>
		<view style="position: relative;" v-if="isShow">
			<image mode="aspectFill" class="userimage" :style="{marginTop: - CustomBar +'rpx'}" src="/static/images/bj.jpg"></image>
			<image :src="imgList" mode="aspectFill" :style="{transform:'scale(' + scale + ')'}" class="fixed-image" @error="imageError"></image>
			<view class="cu-capsule radius camerafill" @tap="ChooseImage">
				<text class='lg text-gray cuIcon-camerafill padding-xs'></text>
				<text class="padding-xs">头像</text>
			</view>
		</view>
		<view class="cu-list menu-avatar" v-if="isShow">
			<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
				<form @submit="formSubmit" @reset="formReset">
					<view :style="{marginBottom:100 + 'rpx'}">
						<view class="cu-form-group">
							<view class="title">姓名</view>
							<input type="text" name="LUSERNAME" :value="deliverplan.LUSERNAME" />
						</view>
						<view class="cu-form-group">
							<view class="title">员工号</view>
							<input type="text" disabled :value="deliverplan.LUSERCODE" />
						</view>
						<view class="cu-form-group">
							<view class="title">邮箱</view>
							<input type="text" name="LEMAIL" :value="deliverplan.LEMAIL" />
						</view>
						<view class="cu-form-group">
							<view class="title">年龄</view>
							<input type="number" name="LAGE" :value="deliverplan.LAGE" />
						</view>
						<view class="cu-form-group">
							<view class="title">性别</view>
							<picker @change="PickerChange1" name="LGENDER" :value="index1" :range="picker1" range-key="name">
								<view class="picker">
									{{index1>-1?picker1[index1].name:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">身份证号</view>
							<input type="number" name="LIDCARD" :value="deliverplan.LIDCARD" />
						</view>
						<view class="cu-form-group">
							<view class="title">开户行</view>
							<input type="text" name="LBANK" :value="deliverplan.LBANK" />
						</view>
						<view class="cu-form-group">
							<view class="title">银行账号</view>
							<input :adjust-position="false" :value="deliverplan.LBANKCODE" type="number" name="LBANKCODE" />
						</view>
						<view class="cu-form-group">
							<view class="title">手机号</view>
							<input :adjust-position="false" :value="deliverplan.LMOBILE" type="number" name="LMOBILE" />

							<text class="cuIcon-phone text-orange" style="font-size: 50rpx;" @tap="PhoneCall(deliverplan.LMOBILE)"></text>
						</view>
						<view class="cu-form-group">
							<view class="title">职位</view>
							<input :adjust-position="false" :value="deliverplan.LDUTYID" type="text" name="LDUTYID" />
						</view>
						<view class="cu-form-group">
							<view class="title">车间</view>
							<picker @change="PickerChange3" name="LPLANTINDEX" :value="index3" :range="picker3" range-key="LNAME">
								<view class="picker">
									{{index3>-1?picker3[index3].LNAME:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">班次</view>
							<picker @change="PickerChange2" name="LCLASSINDEX" :value="index2" :range="picker2" range-key="LNAME">
								<view class="picker">
									{{index2>-1?picker2[index2].LNAME:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">工序</view>
							<picker @change="PickerChange4" name="LPRCTYPE" :value="index4" :range="picker4" range-key="LNAME">
								<view class="picker">
									{{index4>-1?picker4[index4].LNAME:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">是否离职</view>
							<switch @change="SwitchA" name="LISDIMISSION" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
						</view>
					</view>
					<button-father :Position="'tb-fa-fixed'">
						<button class="cu-btn bg-gradual-red lg shadow tb-flex cu-btn-new" @tap="deleteL">删除</button>
						<button class="cu-btn bg-gradual-blue lg shadow tb-flex cu-btn-new" form-type="submit">确认修改</button>
					</button-father>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getselectDeitial
	} from "@/service/selectList"
	import {
		postdeleteList
	} from "@/service/deleteList"
	import {
		getselectReferList
	} from "@/service/selectList"
	import {
		postupdate
	} from '@/service/updateList'
	import ButtonFather from "@/colorui/components/ButtonFather.vue";
	import DetailHeader from "@/colorui/components/DetailHeader/DetailHeader.vue"
	export default {
		data() {
			return {
				height: this.screenHeight,
				isShow: false,
				CustomBar: this.CustomBar,
				opcity: 0,
				scale: 1,
				scrollH: 0,
				picker1: [{
					name: "男"
				}, {
					name: "女"
				}],
				picker2: [],
				picker3: [],
				picker4: [],
				imgList: [],
				imagename: '',
				index1: -1,
				index2: -1,
				index3: -1,
				index4: -1,
				switchA: false,
				deliverplan: {}
			}
		},
		computed: {
			...mapGetters([
				'Style', 'Font', 'BackGround', 'BackGroundBox'
			]),
			ip() {
				let ip = uni.getStorageSync('IP') || 'http://47.101.156.202'
				let port = uni.getStorageSync('PORT') || '8443'
				return ip + ':' + port
			},
		},
		components: {
			DetailHeader,
			ButtonFather
		},
		onLoad(option) {
			this.LID = option.LID
			this.selectDeitial()
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / uni.upx2px(this.scrollH);
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.scale = 1 - opcity;
		},
		methods: {
			async selectDeitial() {
				let Data = await getselectDeitial(1005, '表头', {
					LID: this.LID
				})
				let picker3 = await getselectReferList(1005, '表头', 'LPLANTINDEX', {})
				let picker2 = await getselectReferList(1005, '表头', 'LCLASSINDEX', {})
				let picker4 = await getselectReferList(1005, '表头', 'LPRCTYPE', {})
				if (picker3.code === 1) {
					this.picker3 = picker3.data
				}
				if (picker2.code === 1) {
					this.picker2 = picker2.data
				}
				if (picker4.code === 1) {
					this.picker4 = picker4.data
				}
				if (Data.code === 1) {
					this.deliverplan = Data.data[0]
					this.switchA = this.deliverplan.LISDIMISSION
					this.picker1.forEach((val, index) => {
						if (val.name == this.deliverplan.LGENDER) {
							this.index1 = index
						}
					});
					this.picker2.forEach((val, index) => {
						if (val.LNAME == this.deliverplan.LCLASSINDEX) {
							this.index2 = index
						}
					});
					this.picker3.forEach((val, index) => {
						if (val.LNAME == this.deliverplan.LPLANTINDEX) {
							this.index3 = index
						}
					});
					this.picker4.forEach((val, index) => {
						if (val.LNAME == this.deliverplan.LPRCTYPE) {
							this.index4 = index
						}
					});
					this.imgList = this.ip + '/image/UserImage/FaceImage/' + this.deliverplan.LPHOTO
					this.isShow = true
					setTimeout(() => {
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(this);
							query.select('.index').boundingClientRect(data => {
								console.log(data.height);
								this.scrollH = data.height - this.screenHeight
								if (this.scrollH > uni.upx2px(800)) {
									this.scrollH = uni.upx2px(800)
								}
							}).exec();
						})
					}, 500)
				}
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						console.log(res.tempFilePaths);
						this.imgList = res.tempFilePaths[0]
						uni.uploadFile({
							// url:'http://192.168.31.29:8080/upload',
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/upload',
							filePath: this.imgList,
							header: {
								'token': uni.getStorageSync('token')
							},
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								let myres = JSON.parse(res.data)
								console.log(myres.data);
								this.imagename = myres.data
							}
						})
					}
				});
			},
			PhoneCall(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			PickerChange3(e) {
				this.index3 = e.detail.value
			},
			PickerChange4(e) {
				this.index4 = e.detail.value
			},
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			deleteL() {
				postdeleteList(1005, this.deliverplan.LID, '', '').then(res => {
					if (res.code != 0) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
						global.Return = true
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			},
			formSubmit(e) {
				//定义表单规则
				var rule = [{
						name: "LUSERNAME",
						checkType: "notnull",
						errorMsg: "请输入姓名"
					},
					{
						name: "LMOBILE",
						checkType: "phoneno",
						errorMsg: "请输入正确手机号"
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else {
					e.detail.value['LPHOTO'] = this.imagename || this.deliverplan.LPHOTO
					e.detail.value['LGENDER'] = this.picker1[this.index1].name
					e.detail.value['LPLANTINDEX'] = this.picker3[this.index3].LNAME
					e.detail.value['LCLASSINDEX'] = this.picker2[this.index2].LNAME
					e.detail.value['LPRCTYPE'] = this.picker4[this.index4].LNAME
					e.detail.value['LID'] = this.deliverplan.LID
					let data = e.detail.value
					postupdate('100501',data.LUSERNAME,{'table':data}).then(res => {
						console.log(res);
						if(res.code == 1) {
							global.Return = true
							uni.showToast({
								title:'修改成功',
								icon:"success"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							},500)
						} else {
							uni.showToast({
								title:'修改失败',
								icon:"none"
							})
						}
					})
				}
				
				
			},
			imageError(e) {
				if (e.detail.errMsg.indexOf('404') != -1) {
					this.imgList = '/static/images/header@404.jpg'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userimage {
		width: 100%;
		z-index: 1;
		height: 800rpx
	}

	.camerafill {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		z-index: 10;
		border: 2rpx solid #eee;
		color: #fff;
		display: flex;
		align-items: center;
		background-color: rgba(128, 139, 161, 0.3);
	}

	.fixed {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		z-index: 999;
	}

	.fixed-image {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 380rpx;
		left: 280rpx;
		border-radius: 50%;
		background-color: #CCCCCC;
		z-index: 9;
		border: 4rpx solid #ccc;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}
</style>
